<mat-form-field appearance="standard" class="w-100">
  <mat-label>{{ field.templateOptions?.label || '' | translate }}</mat-label>
  <mat-chip-list
    #chipList
    [formControl]="formControl"
    aria-label="Filter selection">
    <mat-chip
      (click)="edit(chip)"
      (removed)="remove(chip)"
      *ngFor="let chip of formControl.value">
      {{ chip }}
      <button matChipRemove>
        <mat-icon>cancel</mat-icon>
      </button>
    </mat-chip>
    <input
      (matChipInputTokenEnd)="add($event)"
      [formlyAttributes]="field"
      [matChipInputAddOnBlur]="addOnBlur"
      [matChipInputFor]="chipList"
      [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
      [placeholder]="field.templateOptions?.placeholder || '' | translate"
      [required]="field.templateOptions?.required" />
  </mat-chip-list>
  <mat-error *ngIf="formControl.invalid">
    <app-formly-errors [field]="field"></app-formly-errors>
    <mat-hint
      *ngIf="field.templateOptions?.hint && field.templateOptions?.alwaysHint"
      class="float-right"
      align="end">
      {{ field.templateOptions?.hint | translate }}
    </mat-hint>
  </mat-error>
  <mat-hint>{{ field.templateOptions?.hint || '' | translate }}</mat-hint>
</mat-form-field>
